<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>

<input id="ctl00_ToolkitScriptManager1_HiddenField" type="hidden">

<div class="with-head">
	<div class="with-padding" style="height: 100%; overflow: auto; color: Black;">		
		<div>
			<div class="block-border" style="background-color: #efefef;">
				<div class="block-content">
					<h1>
						Manage Users
					</h1>
					<div class="block-controls">
						<ul class="controls-tabs same-height with-children-tip">
							<li>
								<a> 
									<input title="Add" src="users.aspx_files/add.png" style="border-width: 0px;" type="image"> 
								</a>
							</li>
							<li class="current">
								<a> 
									<input title="Edit" src="users.aspx_files/edit.png" style="border-width: 0px;" type="image"> 
								</a>
							</li>
						</ul>
					</div>
					<br>
					<fieldset class="grey-bg">
						<legend>
							<a href="#">Please Select Existing Users</a>
						</legend>
						<div class="float-left gutter-right">
							<span class="label">User Type</span>
							<select name="roleId" onchange="getStaffList(this.value,'${contextPath}','staffListSelectBox')">
								<c:forEach var="role" items="${roleList}">
									<option value="${role.roleId}">
										${role.roleShortName}
									</option>
								</c:forEach>
							</select>	
						</div>
						<div class="float-left gutter-right">
							<span class="label">Users</span>
							<select id="staffListSelectBox" name="staffId">
								<c:forEach var="staff" items="${staffList}">
									<option value="${staff.staffId}">
										${staff.firstName} ${staff.lastName}[${staff.userName}]
									</option>
								</c:forEach>
							</select>								
						</div>
						<div class="float-left gutter-right">
							<span class="label">&nbsp;&nbsp;</span>
							<input value="Edit" class="button" type="button" onclick="">
						</div>
					</fieldset>
					<form:form action="saveOrUpdateStaff.ems" method="POST" commandName="staff">
						<div>
							<div class="box" style="overflow: auto">
								<p class="mini-infos">
									<strong>
										<span>
											Please enter the details below to add user:
										</span> 
									</strong>
								</p>
								<div id="ctl00_ContentPlaceHolder2_TabContainer1" class="ajax__tab_yuitabview-theme ajax__tab_container ajax__tab_default"
									style="visibility: visible;">
									<div class="ajax__tab_header" id="ctl00_ContentPlaceHolder2_TabContainer1_header">
										<span class="ajax__tab_active" id="ctl00_ContentPlaceHolder2_TabContainer1_TabPanel6_tab">
											<span class="ajax__tab_outer"> 
												<span class="ajax__tab_inner"> 
													<span class="ajax__tab_tab" id="__tab_ctl00_ContentPlaceHolder2_TabContainer1_TabPanel6">
														General Details 
													</span> 
												</span> 
											</span> 
										</span>
										<span class="" id="ctl00_ContentPlaceHolder2_TabContainer1_TabPanel1_tab">
											<span class="ajax__tab_outer"> 
												<span class="ajax__tab_inner"> 
													<span class="ajax__tab_tab" id="__tab_ctl00_ContentPlaceHolder2_TabContainer1_TabPanel1">
														Personal Details 
													</span> 
												</span> 
											</span> 
										</span>
										<span class="" id="ctl00_ContentPlaceHolder2_TabContainer1_TabPanel3_tab">
											<span class="ajax__tab_outer"> 
												<span class="ajax__tab_inner"> 
													<span class="ajax__tab_tab" id="__tab_ctl00_ContentPlaceHolder2_TabContainer1_TabPanel3">
														Educational Details 
													</span> 
												</span> 
											</span> 
										</span>
										<span class="" id="ctl00_ContentPlaceHolder2_TabContainer1_TabPanel9_tab">
											<span class="ajax__tab_outer"> 
												<span class="ajax__tab_inner"> 
													<span class="ajax__tab_tab" id="__tab_ctl00_ContentPlaceHolder2_TabContainer1_TabPanel9">
														Financial Details 
													</span> 
												</span> 
											</span> 
										</span>
									</div>
									<div class="ajax__tab_body" id="ctl00_ContentPlaceHolder2_TabContainer1_body">
										<div style="visibility: visible;" id="ctl00_ContentPlaceHolder2_TabContainer1_TabPanel6" class="ajax__tab_panel">
											<table class="table smaller" width="100%">
												<tbody>
													<tr>
														<td width="160">
															Staff Number
														</td>
														<td colspan="3">
															<form:input path="staffNumber" maxlength="50" />
														</td>
													</tr>
													<tr>
														<td width="160">
															Name:
														</td>
														<td valign="top">
															<span class="relative"> 
																<label class="required">
																	First Name
																</label>
																<br/>
																<form:input path="firstName" maxlength="50" /> 
																<span class="check-error" style="color: Red; visibility: hidden;"> 
																</span> 
															</span>
														</td>
														<td>
															<span class="relative"> 
																<label class="required">
																	Last Name
																</label> 
																<br/>
																<form:input path="lastName" maxlength="50" /> 
																<span class="check-error" style="color: Red; visibility: hidden;"> 
																</span>
															</span>
														</td>
														<td valign="top">
															Middle Name Initials:
															<br/>
															<form:input path="middleName" maxlength="50" />
														</td>
													</tr>
													<tr>
														<td width="160">
															Login Details
														</td>
														<td>
															User Name:
															<br>
															<form:input path="userName" maxlength="50" />
														</td>
														<td colspan="2">
															Password:
															<span class="style2">
																<br> 
																<form:password path="password" /> 
															</span>&nbsp;
															<form:checkbox id="canChangePassword" path="canChangePassword" />
															<label for="canChangePassword">
																Check to change password
															</label>
														</td>
													</tr>
													<tr>
														<td width="160">
															Position
														</td>
														<td colspan="3">
															<form:select path="positionId" items="${positionList}"
																itemValue="positionId" itemLabel="positionName" />
														</td>
													</tr>
													<tr>
														<td width="160">
															<label class="required">
																Date of Birth:
															</label>
														</td>
														<td colspan="3">
															<div class="calendarContainer">
																<span class="relative"> 
																	<form:input path="dateOfBirth" /> 
																	<span class="check-error" style="color: Red; visibility: hidden;"></span>
																	<span class="check-error" style="color: Red; visibility: hidden;"></span> 
																</span>
															</div>
														</td>
													</tr>
													<tr>
														<td width="160">
															Status
														</td>
														<td colspan="3">
															<table border="0">
																<tbody>
																	<tr>
																		<td>
																			<form:radiobutton id="status_active" path="status" value="true" />
																			<label for="status_active">
																				Active
																			</label>
																		</td>
																		<td>
																			<form:radiobutton id="status_inactive" path="status" value="false" />
																			<label for="status_inactive">
																				Inactive
																			</label>
																		</td>
																	</tr>
																</tbody>
															</table>
														</td>
													</tr>
													<tr>
														<td>
															Gender
														</td>
														<td colspan="3">
															<table border="0">
																<tbody>
																	<tr>
																		<td>
																			<form:radiobutton id="gender_male" path="gender" value="true" />
																			<label for="gender_male">
																				Male
																			</label>
																		</td>
																		<td>
																			<form:radiobutton id="gender_female" path="gender" value="false" />
																			<label for="gender_female">
																				Female
																			</label>
																		</td>
																	</tr>
																</tbody>
															</table>
														</td>
													</tr>
													<tr>
														<td>
															Role
														</td>
														<td colspan="3">
															<table border="0">
																<tbody>
																	<tr>
																		<c:forEach var="role" items="${roleList}">
																			<td>
																				<form:radiobutton id="${role.roleShortName}"
																					path="roleId" value="${role.roleId}" />
																				<label for="${role.roleShortName}">
																					${role.roleShortName}
																				</label>
																			</td>
																		</c:forEach>
																	</tr>
																</tbody>
															</table>
														</td>
													</tr>
													<tr>
														<td colspan="4">
														</td>
													</tr>													
												</tbody>
											</table>
										</div>
										<div id="ctl00_ContentPlaceHolder2_TabContainer1_TabPanel1" class="ajax__tab_panel"
											style="visibility: hidden; display: none;">
											<table class="table smaller" width="100%">
												<tbody>
													<tr>
														<td>
															Address:
														</td>
														<td colspan="5">
															Street
															<br>
															<form:input path="street" maxlength="400" size="70" cssClass="tboxbig" />
														</td>
													</tr>
													<tr>
														<td>
															&nbsp;
														</td>
														<td colspan="3">
															Area:
															<br>
															<form:input path="area" maxlength="50" size="50" cssClass="tbox" />
														</td>
														<td colspan="2">
															City:
															<br>
															<form:input path="city" maxlength="50" size="50" cssClass="tbox" />
														</td>
													</tr>
													<tr>
														<td>
															&nbsp;
														</td>
														<td>
															State:
															<br>
															<form:select id="stateListSelectBox" path="stateId" />
														</td>
														<td colspan="2">
															Country:
															<br>
															<select name="countryId" onchange="getStateList(this.value,'${contextPath}','stateListSelectBox')">
																<option value="0">
																	Please select country
																</option>
																<c:forEach var="country" items="${countryList}">
																	<option value="${country.countryId}">
																		${country.countryName}
																	</option>
																</c:forEach>
															</select>
														</td>
														<td colspan="2">
															Zip:
															<br>
															<form:input path="zipCode" cssClass="tbox" maxlength="50" />
														</td>
													</tr>
													<tr>
														<td>
															Phones:
														</td>
														<td>
															Mobile:
															<br>
															<form:input path="mobileNumber" cssClass="tbox" maxlength="50" />
														</td>
														<td colspan="2">
															Home:
															<br>
															<form:input path="homePhoneNumber" cssClass="tbox" maxlength="50" />
														</td>
														<td colspan="2">
															Other:
															<br>
															<form:input path="otherPhoneNumber" cssClass="tbox" maxlength="50" />
														</td>
													</tr>
													<tr>
														<td>
															Email:
														</td>
														<td colspan="5">
															<span class="relative"> 
																<form:input path="emailId" cssStyle="width: 300px;" maxlength="300" /> 
																<span class="check-error" style="color: Red; visibility: hidden;"> 
																</span> 
															</span>
														</td>
													</tr>
													<tr>
														<td>
															Image:
														</td>
														<td colspan="5">
															<input type="file" name="imagePath" />
														</td>
													</tr>
													<tr>
														<td class="bg" width="160">
															Spouse Name:
														</td>
														<td colspan="5" bgcolor="#f9f9f9">
															<form:input path="spouseName" cssClass="tbox" maxlength="50" />
															&nbsp;
														</td>
													</tr>
													<tr>
														<td>
															More Info :
														</td>
														<td colspan="5">
															&nbsp;
															<form:textarea path="moreInfo" rows="2" cols="20" cssStyle="height: 100px; width: 90%;" />
														</td>
													</tr>
												</tbody>
											</table>
										</div>
										<div id="ctl00_ContentPlaceHolder2_TabContainer1_TabPanel3" class="ajax__tab_panel"
											style="visibility: hidden; display: none;">
											<table class="table smaller" width="100%">
												<tbody>
													<tr>
														<td width="22%">
															Qualification
															<br>
															<form:textarea path="qualification" rows="2" cols="20" cssStyle="height: 60px; width: 90%;" />
														</td>
														<td width="22%">
															University
															<br>
															<form:textarea path="university" rows="2" cols="20" cssStyle="height: 60px; width: 90%;" />
														</td>
													</tr>
													<tr>
														<td width="22%">
															&nbsp;
														</td>
														<td width="22%">
															&nbsp;
														</td>
													</tr>
													<tr>
														<td width="22%">
															Experience
															<br>
															<form:textarea path="experience" rows="2" cols="20" cssStyle="height: 60px; width: 90%;" />
														</td>
														<td width="22%">
															Subject Matter expert
															<br>
															<form:textarea path="subjectMatterExpert" rows="2" cols="20" cssStyle="height: 60px; width: 90%;" />
														</td>
													</tr>
													<tr>
														<td width="22%">
															<br>
														</td>
														<td width="22%">
															&nbsp;
														</td>
													</tr>
													<tr>
														<td width="22%">
															Additional Curricular Activities
															<br>
															<form:textarea path="additionalCurricularActivities" rows="2" cols="20" cssStyle="height: 60px; width: 90%;" />
														</td>
														<td width="22%">
															Rewards/Achievements
															<br>
															<form:textarea path="rewardsOrAchievements" rows="2" cols="20" cssStyle="height: 60px; width: 90%;" />
														</td>
													</tr>
													<tr>
														<td width="22%">
															<br>
														</td>
														<td width="22%">
															&nbsp;
														</td>
													</tr>
													<tr>
														<td width="22%">
															Memberships
															<br>
															<form:textarea path="memberships" rows="2" cols="20" cssStyle="height: 60px; width: 90%;" />
														</td>
														<td width="22%">
															Others
															<br>
															<form:textarea path="others" rows="2" cols="20" cssStyle="height: 60px; width: 90%;" />
														</td>
													</tr>
													<tr>
														<td width="22%">
															<br>
														</td>
														<td width="22%">
															&nbsp;
														</td>
													</tr>
												</tbody>
											</table>
										</div>
										<div id="ctl00_ContentPlaceHolder2_TabContainer1_TabPanel9" class="ajax__tab_panel"
											style="visibility: hidden; display: none;">
											<table class="table smaller" width="100%">
												<tbody>
													<tr>
														<td class="bg" width="160">
															Date of Hire
														</td>
														<td>
															<div class="calendarContainer">
																<form:input path="dateOfHire" cssClass="tbox" />
															</div>
														</td>
													</tr>
													<tr>
														<td class="bg" width="160">
															Date of Termination
														</td>
														<td>
															<div class="calendarContainer">
																<form:input path="dateOfTermination" cssClass="tbox" />
															</div>
														</td>
													</tr>
													<tr>
														<td class="bg" width="160">
															Date of Retirement
														</td>
														<td>
															<div class="calendarContainer">
																<form:input path="dateOfRetirement" cssClass="tbox" />
															</div>
														</td>
													</tr>
													<tr>
														<td class="bg" width="160">
															&nbsp;
														</td>
														<td>
															&nbsp;
														</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>
								<br>
								<input name="ctl00$ContentPlaceHolder2$btnAdd" value="Save" class="button" type="submit">
								&nbsp; &nbsp;
								<div style="color: Red; display: none;">
								</div>
							</div>
						</div>
					</form:form>
				</div>
			</div>
		</div>
	</div>
</div>


<script type="text/javascript">
//<![CDATA[
Sys.Application.add_init(function() {
    $create(Sys.Extended.UI.TabPanel, {"headerTab":$get("__tab_ctl00_ContentPlaceHolder2_TabContainer1_TabPanel6"),"ownerID":"ctl00_ContentPlaceHolder2_TabContainer1"}, null, {"owner":"ctl00_ContentPlaceHolder2_TabContainer1"}, $get("ctl00_ContentPlaceHolder2_TabContainer1_TabPanel6"));
});
Sys.Application.add_init(function() {
    $create(Sys.Extended.UI.TabPanel, {"headerTab":$get("__tab_ctl00_ContentPlaceHolder2_TabContainer1_TabPanel1"),"ownerID":"ctl00_ContentPlaceHolder2_TabContainer1"}, null, {"owner":"ctl00_ContentPlaceHolder2_TabContainer1"}, $get("ctl00_ContentPlaceHolder2_TabContainer1_TabPanel1"));
});
Sys.Application.add_init(function() {
    $create(Sys.Extended.UI.TabPanel, {"headerTab":$get("__tab_ctl00_ContentPlaceHolder2_TabContainer1_TabPanel3"),"ownerID":"ctl00_ContentPlaceHolder2_TabContainer1"}, null, {"owner":"ctl00_ContentPlaceHolder2_TabContainer1"}, $get("ctl00_ContentPlaceHolder2_TabContainer1_TabPanel3"));
});
Sys.Application.add_init(function() {
    $create(Sys.Extended.UI.TabPanel, {"headerTab":$get("__tab_ctl00_ContentPlaceHolder2_TabContainer1_TabPanel9"),"ownerID":"ctl00_ContentPlaceHolder2_TabContainer1"}, null, {"owner":"ctl00_ContentPlaceHolder2_TabContainer1"}, $get("ctl00_ContentPlaceHolder2_TabContainer1_TabPanel9"));
});
Sys.Application.add_init(function() {
    $create(Sys.Extended.UI.TabContainer, {"activeTabIndex":0,"clientStateField":$get("ctl00_ContentPlaceHolder2_TabContainer1_ClientState")}, null, null, $get("ctl00_ContentPlaceHolder2_TabContainer1"));
});
//]]>
</script>